<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Uptime</title>
    <link rel="stylesheet" href="<%= route %>/stylesheets/bootstrap.css">
    <link rel="stylesheet" href="<%= route %>/stylesheets/style.css">
    <link rel="shortcut icon" href="<%= route %>/favicon.ico">
    <link rel="apple-touch-icon" href="<%= route %>/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="<%= route %>/apple-touch-icon-ipad.png">
    <link rel="apple-touch-icon" sizes="114x114" href="<%= route %>/apple-touch-icon-iphone4.png">
    <%- renderCssTags(addedCss) %>
    <script src="<%= route %>/javascripts/jquery.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script>
    var socket = io.connect(location.protocol + '//' + location.hostname);
    </script>
    <script src="<%= route %>/javascripts/moment.min.js"></script>
    <!--[if lt IE 9]>
    <script src="http://raw.github.com/aFarkas/html5shiv/master/src/html5shiv.js"></script>
    <script src="http://raw.github.com/kriskowal/es5-shim/master/es5-shim.js"></script>
    <script src="http://raw.github.com/kriskowal/es5-shim/master/es5-sham.js"></script>
    <script type="text/javascript" src="path/to/flashcanvas.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <div class="navbar navbar-inverse">
        <div class="navbar-inner">
          <div class="container">
            <a class="brand" href="<%= route %>/events">Uptime</a>
            <ul class="nav pull-left">
              <li><a href="<%= route %>/events">Events</a></li>
              <li><a href="<%= route %>/checks">Checks</a></li>
              <li><a href="<%= route %>/tags">Tags</a></li>
              <li id="new_events"><a href="<%= route %>/events?highlightFrom=<%= Date.now() %>"></a></li> 
            </ul>
            <ul class="nav pull-right" id="check_summary">
              <li id="all_up" style="display:none;"><span class="label label-success">Up</span><strong class="green">0</strong></li>
              <li id="all_down" style="display: none;"><span class="label label-important">Down</span><strong class="red">0</strong></li>
            </ul>
          </div>
        </div>
      </div>
      <section>
        <%- body %>
      </section>
      <footer class="footer">
        <p class="pull-right"><a href="#">Back to top</a></p>
        <p><a href="https://github.com/fzaninotto/uptime">Uptime <%= version %></a>, powered by <a href="http://nodejs.org/">Node.js</a>, <a href="http://www.mongodb.org/">MongoDB</a>, and <a href="http://twitter.github.com/bootstrap/">Bootstrap</a>.</p>
        <p>Code licensed under the <a href="https://raw.github.com/fzaninotto/uptime/master/LICENSE">MIT License</a>. Check the <a href="https://github.com/fzaninotto/uptime">Uptime GitHub repository</a> regularly for updates.
      </footer>
    </div>
    <script>
    var nbNewEvents = 0;
    var loadedAt = new Date();
    $(document).ready(function() {
      var changeFavicon = function(red) {
        $('head link[rel="shortcut icon"]').remove()
        $('head').append('<link rel="shortcut icon" type="image/x-icon" href="/dashboard/favicon' + (red ? '_red' : '') + '.ico">')
      }
      var updateCounts = function() {
        $.getJSON('/api/checks/count', function(count) {
          if (count.total > 0) {
            $('#all_up').show().children('strong').text(count.up);
          } else {
            $('#all_up').hide();
          }
          if (count.down > 0) {
            $('#all_down').show().children('strong').text(count.down);
            changeFavicon(true);
          } else {
            $('#all_down').hide();
            if (nbNewEvents > 0) {
              changeFavicon(false);
            }
          }
          if (nbNewEvents > 0) {
            document.title = '(' + nbNewEvents +') Uptime';
          };
        });
      };
      socket.on('CheckEvent', function() {
        nbNewEvents++;
        updateCounts();
        $('#check_summary').fadeOut().fadeIn().fadeOut().fadeIn();
        $('#new_events a').html(nbNewEvents + ' new event' + (nbNewEvents > 1 ? 's' : '') + ' since ' + moment(loadedAt).format('LLL'));
      });
      updateCounts();
    });
    </script>
  </body>
</html>